<div class="hbox hbox-auto-xs hbox-auto-sm" ng-init="
    app.settings.asideFolded = false; 
    app.settings.asideDock = false;
  ">
  <!-- main -->
  <div class="col">
    <!-- main header -->
    <div class="bg-light lter b-b wrapper-md">
      <div class="row">
        <div class="col-sm-6 col-xs-12">
          <h1 class="m-n font-thin h3 text-black">系统管理</h1>
          <small class="text-muted">新增,更新,删除系统</small>
        </div>
      </div>
    </div>
    <!-- / main header -->
    <div class="wrapper-md" ng-controller="systemCtrl">
        <!-- toaster directive -->
        <toaster-container toaster-options="{'position-class': 'toast-top-right', 'close-button':true}"></toaster-container>
        <!-- / toaster directive -->
        <form name="form" class="form-inline">
            <div class="input-group">
                <input ng-model="systemName" type="text" class="form-control" placeholder="查询系统......">
                <span class="input-group-btn">
                    <button ng-click="querySystem()" class="btn btn-default" type="button">Go!</button>
                </span>
            </div><!-- /input-group -->
            <div class="input-group">
                <button class="btn btn-info" type="button" ng-click="addSystem()">新增</button>
            </div>
        </form>

        <div class="panel" style="margin-top: 5px;">
            <div class="panel-body">
                <div class="wrapper-md">
                    <div class="row row-sm">
                        <div class="col-lg-3 col-md-4 col-sm-6" ng-repeat="item in pageData">
                            <div class="panel b-a">
                                <div class="panel-heading text-center bg-info no-border">
                                    <h4 class="text-u-c m-b-none">{{item.systemName}}</h4>
                                    <div class="text-center">
                                        <img ng-if="item.imgUrl != null && item.imgUrl != ''" ng-src="{{item.imgUrl}}" style="width: 40px; height: 40px;">
                                        <div ng-if="item.imgUrl == null || item.imgUrl == ''" class="glyphicon glyphicon-picture"></div>
                                    </div>
                                    <h2 class="m-t-none">
                                        <span class="text-sm">{{item.owner}}</span>
                                    </h2>
                                </div>
                                <ul class="list-group">
                                    <li class="list-group-item">
                                        <i ng-if="item.systemDesc != null && item.systemDesc != ''" class="text-success m-r-xs">{{item.systemDesc}}</i>
                                        <i ng-if="item.systemDesc == null || item.systemDesc == ''" class="text-success m-r-xs">写点什么介绍一下...</i>
                                    </li>
                                    <li class="list-group-item">
                                        <i class="text-success m-r-xs"><a ng-href="{{item.systemUrl}}">{{item.systemUrl}}</a></i>
                                    </li>
                                </ul>
                                <div class="panel-footer text-center">
                                    <a href class="btn btn-info font-bold m" ng-click="editSystem(item)">编辑</a>
                                    <a href class="btn btn-danger font-bold m" ng-click="delSystem(item.id)">删除</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="text-center" ng-if="pageData != null && pageData.length != 0">
                        <ul style="margin: 0px;" uib-pagination total-items="totalItems" ng-model="currentPage" items-per-page="pageLength" max-size="10" ng-change="pageChanged()" previous-text="&lsaquo;" next-text="&rsaquo;"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
  <!-- / main -->
</div>

<script type="text/ng-template" id="systemModal">
    <div ng-include="'tpl/modal/system_modal.html'"></div>
</script>